<template>
  <!-- 维保管理--维保记录-->
  <div class="content-area">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item"><span>注册代码:</span>
          <el-input placeholder="请输入内容" v-model="searchData.elCode" clearable></el-input>
        </div>
        <div class="search-item" v-if="userDepartmentType!=1">
          <unit-data @curName="getDepId" @setStatus="set" :childName="parentName" :searchType="1"
                     @setInputEmpty="setInputEmpty"></unit-data>
        </div>
        <div class="search-item search-time"><span>开始时间:</span>
          <el-date-picker v-model="searchData.startDate" align="right" type="date" placeholder="选择开始时间">
          </el-date-picker>
        </div>
        <div class="search-item search-time"><span>结束时间:</span>
          <el-date-picker v-model="searchData.endDate" align="right" type="date" placeholder="选择结束时间">
          </el-date-picker>
        </div>
        <areaSelect v-on:getNowAreaPosition="getArea" :areaText="areaText"></areaSelect>

      </div>
      <div class="search-footer">
        <button class="search-btn" @click="lookupByConditions">查询</button>
      </div>
    </div>

    <!--内容-->
    <div class="main-content">
      <div class="content-info" style="width: 100%">
        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo"  v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <!--<button class="some-btn" @click="downLoad">导出</button>-->
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <el-table-column fixed="right" align="center" label="操作" width="100" v-if="pagePower['004004001']">
            <template slot-scope="scope">
              <div class="item-route">
                <div class="item-route-link"
                     @click="$goRoute( '/manage/maintainMgr/maintainHistorty/maintainHistoryCheck?id='+scope.row.id);">
                  查看详情
                </div>
              </div>
            </template>
          </el-table-column>

        </DataTable>

      </div>
    </div>
  </div>
</template>
<script>
  import com from '../../../js/common'
  // 表格
  import DataTable from "../../../components/dataTable/dataTable"
  import areaSelect from "../../../components/areaSelect/areaSelect"
  // 时间插件
  import moment from 'moment'
  import HeadTop from "../../../components/head-top/head-top"
  import unitData from "../../../components/unitData/unitData"
  import {getMaintainRecord} from '@/api/getData'

  export default {
    name: 'maintainHistorty',
    components: {
      DataTable,
      areaSelect,
      HeadTop,
      unitData
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        pagePower: JSON.parse(com.getStore('pagePowers'))['004004'] ? JSON.parse(com.getStore('pagePowers'))['004004'] : {},
        parentName: "维保单位",
        userDepartmentType: com.getStore('departmentType'),
        searchData: {
          startDate: '',
          endDate: '',
          elCode: '',
          elName: '',
          maintainDepCode: '',
          status: '4',
          elAreaCode: '', // 查询地区code
          eleId: '',
        },
        // 子页面信息
        childLink: [
          {
            route: '',
            text: '查看详情',
          }
        ],
        // 表格组件数据
        dataTableObj: {
          tableData: [],
          tableColumns: [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '注册代码',
              width: '120',
              attributeName: 'elCode'
            },
            {
              text: '电梯类型',
              width: '80',
              attributeName: 'elTypeName'
            },
            {
              text: '安装地址',
              width: '180',
              attributeName: 'elArea'
            },
            {
              text: '维保单位',
              width: '160',
              attributeName: 'depName'
            },
            {
              text: '维保责任人',
              width: '80',
              attributeName: 'maintainUserName'
            },
            {
              text: '完成时间',
              width: '120',
              attributeName: 'endDate'
            },
            {
              text: '状态',
              width: '60',
              attributeName: 'status'
            },
            {
              text: '维保项目评分',
              width: '80',
              attributeName: 'maintainMark'
            }
          ],
          // 翻页的数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            pageNo: 1,
            searchStatus: 2,
          },
          checkIds: []
        },
        // 区域选择
        areaText: '区域选择:',
      }
    },
    // 页面装载中,此时获取后端数据
    mounted() {
      if (this.$route.query.id) {
        this.searchData.eleId = this.$route.query.id;
      }
      // 获取当前页面所需数据
      this.getMaintainRecordData();
    },
    methods: {
      // 获取页面所需数据
      getMaintainRecordData(obj) {
        this.dataTableObj.pageObj.searchStatus = 2;
        this.dataTableObj.tableData = [];
        getMaintainRecord({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: this.searchData
        }).then((data) => {
          let infoArr = data.data.data.data;
          if (infoArr.length > 0) {
            let startPage = (this.dataTableObj.pageObj.pageNo - 1) * this.dataTableObj.pageObj.pageSize + 1;
            infoArr.forEach((i, e) => {
              i.index = startPage + e;
              i.endDate = i.endDate ? com.formatDate(i.endDate) : i.endDate;
              i.status = '维保完成';
            })
            this.dataTableObj.tableData = infoArr
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.pageObj.searchStatus = 1;
          this.dataTableObj.pageObj.pageNum = data.data.data.totalRecord;
        }).catch((err) => {
          this.parentLoad = data.data.message    // loading(查询失败)
          this.dataTableObj.pageObj.searchStatus = 0
        })
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getMaintainRecordData();
      },

      // 切换第几页
      searchByPageNo(val) {
        // 切换每页数目
        this.dataTableObj.pageObj.pageNo = val;
        this.getMaintainRecordData();
      },

      // 按查询条件查找
      lookupByConditions: function () {
        if (moment(this.searchData.endDate).isBefore(this.searchData.startDate)) {
          this.$message.warning('开始时间应小于结束时间')
          return
        }
        this.getMaintainRecordData();
      },

      //获得维保单位数据
      getDepId(msg) {
        this.searchData.maintainDepCode = msg
      },
      set() {
        this.searchData.maintainDepCode = -1
      },
      // 前后信息不同时置空查询条件
      setInputEmpty() {
        this.searchData.maintainDepCode = ''
      },
      // 获取查询地址
      getArea(res) {
        this.searchData.elAreaCode = res.code
      },

      //导出
      downLoad() {

      },

      // 页面刷新
      pageReload(){
        this.getMaintainRecordData();
      }
    },

  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";
</style>
